<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* div {
        width: 40px;
        margin: 10px auto;
        text-align: center;
      } */
      span {
        display: inline-block;
        width: 100px;
        cursor: pointer;
      }
      img {
        vertical-align: middle;
        width: 60px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h4 style="color: blue">&nbsp&nbsp欢迎注册会员</h4>
    <form action="date.html" method="post" enctype="multipart/form-data">
      <label for="pnumber"><b>手机号码：</b></label>
      <input type="text" name="pnumber" id="pnumber" placeholder="11位手机号" />
      <span style="color: red">必填</span>
      <br />
      <label for="cnumber"><b>创建密码：</b></label>
      <input type="text" name="cnumber" id="cnumber" placeholder="8位密码" />
      <span style="color: red">必填</span>
      <br />
      <!-- 传值一定要带name属性 -->
      <label for="cmail"><b>注册邮箱：</b></label>
      <input
        type="text"
        name="cmail"
        id="cmail"
        placeholder="例如:wustzz@sina.com"
      />
      <span style="color: red">必填</span>
      <br />
      <label for="code">&emsp;<b>验证码：</b></label>
      <input type="text" name="code" id="code" />
        <span id="capcha">5位验证码</span>
        <img src="images/arrow_03.png" id="change_capcha" alt="">
      <br />
      <label for="sex">&emsp;&emsp;<b>性别：</b></label>
      <input type="radio" name="sex" value="male" checked="checked" /> 男
      <input type="radio" name="sex" value="female" /> 女
      <br />
      <label for="birth">&emsp;&emsp;<b>生日：</b></label>
      <input type="text" name="birth" id="birth" value="  年  /月/日" />
      <br />
      <label for="age">&emsp;&emsp;<b>年龄：</b></label>
      <input type="text" name="age" id="age" />
      <br />
      <label>&emsp;&emsp;<b>籍贯：</b></label>
      <select name="province" style="width: 86px">
        <option value="0" selected="selected">湖北省</option>
        <option value="1">浙江省</option>
      </select>
      <select name="city" style="width: 80px">
        <option value="0" selected="selected">武汉</option>
        <option value="1">温州</option>
      </select>
      <br />
      <label><b>个人学历：</b></label>
      <select name="degree" style="width: 171px">
        <option value="0" selected="selected">本科</option>
        <option value="1">研究生</option>
      </select>
      <br />
      <label>&emsp;&emsp;<b>月薪：</b></label>
      <input
        type="range"
        id="score"
        name="score"
        min="0"
        max="10000"
        step="100"
        value="5000"
      />
      <span id="msg"></span>
      <br />
      <label for="hobby"><b>个人爱好：</b></label>
      <input type="radio" name="hobby" value="sing" /> 唱歌
      <input type="radio" name="hobby" value="run" /> 跑步
      <input type="radio" name="hobby" value="swim" /> 游泳
      <br />

      <label><b>个人照片：</b></label>
      <input type="file" id="test-image-file" name="test" />
      <span id="test-file-info"></span>
      <div
        id="test-image-preview"
        style="
          border: 1px solid silver;
          width: 50%;
          height: 200px;
          background-repeat: no-repeat;
          background-position: center;
        "
      ></div>
      <label><b>个人简介：</b></label>
      <br />
      <textarea name="intro" cols="50" rows="10"></textarea>

      <br />
      <input type="submit" value="提交" />
      <input type="reset" value="重填" />
    </form>
    <!-- 随机数字 -->
    <script>
        //验证码：由大小写字母或数字组成
let codeStr = 
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
//验证码长度
let length = 4;
let capcha = document.getElementById("capcha");
let change_capcha = document.getElementById("change_capcha");
// 用来生成一个[n,m]随机整数
function getRandom(n, m) {
return parseInt(Math.random() * (m - n + 1) + n);
}
// 将随机生成的整数下标对应的字母放入span中
function getCode() {
let str = "";
// 验证码有几位就循环几次
for (let i = 0; i < length; i++) {
let index = getRandom(0, 61);
str += codeStr.charAt(index);
}
capcha.innerHTML = str;
}
// 页面初始加载时就调用函数生成验证码，页面刷新也会执行
getCode(); 
// 点击刷新验证码
capcha.addEventListener("click", getCode);
change_capcha.addEventListener("click", getCode);
      </script> 
    <!-- 图片预览 -->
    <script>
      var fileInput = document.getElementById("test-image-file");
      var info = document.getElementById("test-file-info");
      var preview = document.getElementById("test-image-preview");
      fileInput.addEventListener("change", function () {
        // 监听change事件
        preview.style.backgroundImage = ""; // 清除背景图片
        if (!fileInput.value) {
          info.innerHTML = "没有选择文件";
          return;
        }
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        info.innerHTML =
          "文件: " +
          file.name +
          "<br>" +
          "大小: " +
          file.size +
          "<br>" +
          "修改: " +
          file.lastModifiedDate;
        if (
          file.type !== "image/jpeg" &&
          file.type !== "image/png" &&
          file.type !== "image/gif"
        ) {
          alert("不是有效的图片文件!");
          return;
        }
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) {
          // 发起一个异步操作来读取文件内容
          var data = e.target.result; // data串形如： '...(base64编码)...'
          preview.style.backgroundImage = "url(" + data + ")";
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
      });
    </script>
    <!-- 显示数值 -->
    <script>
      var msg = document.getElementById("msg"); // 根据id值找到span元素
      window.onload = function () {
        msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值
      };
      document.getElementById("score").onchange = function () {
        msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
      };
    </script>
  </body>
</html>
